<template>
	<scroll-view class="category-first" :enable-flex="true" scroll-y :show-scrollbar="false" :scroll-top="scrollToTop"
		:scroll-with-animation="true">
		<view class="cuoponList">
			<view class="item" v-for="(item, index) in couponList" :key="index">
				<view class="title">
					<span class="titls">有效期至：</span>
					<span class="time">{{ item.expirationDate }}</span>
				</view>
				<view class="money">
					抵扣{{ parseFloat(item.discount / 100).toFixed(2) }}元
				</view>
				
				<view class="btn btn1" v-if="item.isActive == 'Y'">不可用</view>
				<view class="btn" v-else @click="userCouponMoney(item.money)">去使用</view>
			</view>
		</view>
		<view class="loadmore">
			<u-loadmore :status="status" />
		</view>
	</scroll-view>
</template>

<script>
	export default {
		data() {
			return {
				status: 'loadmore', // this.status = 'nomore'  设置底部加载更多显示
				couponList: [
					// {
					// 	time: '2024-01-01 19:30',
					// 	money: 20,
					// 	state: 1
					// },

				]
			}
		},
		onLoad() {
			// 判断上一个页面携带的参数，去查询可用优惠券  
			// 这里应该和我的优惠券 查询到的数据不一样
		},
		onShow() {
			this.getData()
		},
		methods: {
			getData() {
				this.$http({
					url: this.$myApi.couponList,
					method: 'GET',
					hideLoading: true,
					data: {},
					success: res => {
						// console.log(res,'成功')
						console.log(res, '优惠券获取的信息')
						this.couponList = res.rows;
					},
					fail: err => {
						console.log(err, '失敗')
				
					},
					complete: e => {
						this.status = 'nomore'
					}
				})
			},
			userCouponMoney(money) {
				console.log(money);
				var pages = getCurrentPages();
				var prevPage = pages[pages.length - 2];
				// #ifdef H5
				prevPage.$vm.couponMoney = money;
				// #endif
				// #ifdef MP-WEIXIN
				prevPage.setData({
					couponMoney: money
				});
				// #endif
				uni.navigateBack({ //返回
					delta: 1
				})

			}
		}
	}
</script>

<style lang="scss" scoped>
	.cuoponList {
		.item {
			width: 690rpx;
			height: 199rpx;
			background: #FFFFFF;
			border-radius: 10rpx;
			opacity: 1;
			margin: 0 auto 25rpx;
			font-size: 28rpx;
			font-family: PingFang SC, PingFang SC;
			font-weight: 500;
			color: #212121;
			box-sizing: border-box;
			padding: 50rpx 30rpx 49rpx 34rpx;
			position: relative;

			.btn {
				width: 130rpx;
				height: 58rpx;
				background-color: #0DBA5A;
				border-radius: 29rpx;
				font-size: 26rpx;
				font-family: PingFang SC, PingFang SC;
				font-weight: bold;
				color: #FFFFFF;
				text-align: center;
				line-height: 58rpx;
				position: absolute;
				right: 29rpx;
				top: 81rpx;
				cursor: pointer;

			}

			.btn1 {
				background-color: #A7A7A7;
				color: #fff;
				user-select: none;
			}

			.title {
				height: 40rpx;
				line-height: 40rpx;
				margin-bottom: 20rpx;

				.titls {
					color: #525252;
					font-weight: bold;
				}
			}
		}
	}

	.loadmore {
		padding-bottom: 38rpx;
	}
</style>
<style>
	page {
		background-color: #EFEFEF;
	}
</style>